.section-wrapper {
  position: relative;
  background-color: rgba(#292B44, 0.9);
  box-sizing: border-box;
  transition: .6s all;
  transform: translateX(0);
  .section-wrapper-top {
    padding: 8px 17px;
    position: relative;
    .title {
      display: inline-block;
      font-size: 22px;
      .title-t {
        color: $--color-primary-2;
        vertical-align: middle;
      }
    }
  }
  .section-wrapper-content {
    padding: 0 17px;
  }
}
.section-wrapper-special {
  background: none;
  .section-wrapper-top {
    position: relative;
    .title {
      position: relative;
      z-index: 9;
      padding-left: 9px;
      .title-t {
        color: #FFF;
      }
      &:before {
        position: absolute;
        content: '';
        top: 5px;
        left: 0;
        width: 4px;
        height: 21px;
        background-color: $--color-primary;
      }
    }
    &:after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 60px;
      pointer-events: none;
      opacity: 0.2;
      background-image: -moz-linear-gradient(rgba(#806EFA, 0.4) rgba( #965CB5, 0));
      background-image: -o-linear-gradient(rgba(#806EFA, 0.4), rgba( #965CB5, 0));
      background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(#806EFA, 0.4)), color-stop(1, rgba( #965CB5, 0)));
      background-image: -webkit-linear-gradient(rgba(#806EFA, 0.4), rgba( #965CB5, 0));
      background-image: -ms-linear-gradient(rgba(#806EFA, 0.4), rgba( #965CB5, 0));
      background-image: linear-gradient(rgba(#806EFA, 0.4), rgba( #965CB5, 0));
    }
  }
}
.wrapper-expand {
  transform: translateX(-100%);
}